<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贪吃蛇</title>
		<style type="text/css">
			#main{
				display:flex;flex-wrap:wrap;width:1100px;
				border:1px solid black;
			}
			#main div{
				width:20px;
				height: 20px;
				background-color: #ccc;
				margin: 1px;
			}
		</style>
	</head>
	<body>
		<button onclick="startGame()">START</button>
		<div id="main">
			
		</div>
		<script type="text/javascript">
			var dec = "right";
			var main = document.getElementById("main");
			//制造棋盘
			function init(){
				for(var r=1;r<+50;r++){
					for(var c=1;c<=50;c++){
						var g = document.createElement("div");
						g.id=r+"-"+c;
						main.appendChild(g);
					}
				}
			}
			init();
			var foodr=20;
			var foodc=20;
			function createFood(){
				foodr=Math.floor(Math.random()*48);
				foodc=Math.floor(Math.random()*48);
				document.getElementById(foodr+"-"+foodc).style.backgroundColor="blue";
				
			}
			createFood();
			var rows=[];//行
			var  cols=[];//列
			//产生蛇在第5行第5列（头），5行4列，5行3列（尾）
			rows.push(5);
			cols.push(5);
			
			rows.push(5);
			cols.push(4);
			
			rows.push(5);
			cols.push(3);
			
			//循环把蛇显示出来（蛇的身体的行列都存在cols和rows里）
			for(var i=0;i<rows.length;i++){
				document.getElementById(rows[i]+"-"+cols[i]).style.backgroundColor="red";
				
			}
			function startGame(){
				window.setInterval(move,500);
			}
			function move(){
				var c=cols[0];//当前蛇头所在列
				var r=rows[0];//当前蛇头所在行
				//根据方向得到最新蛇头的位置
				switch(dec){
					case "right":c++;break;
					case "left":c--;break;
					case "up":r--;break;
					case "down":r++;break;
					default:break;
				}
				
				//设置新蛇头的颜色，并压入数组顶部记录下来
				document.getElementById(r+"-"+c).style.backgroundColor="red";//让最新的蛇头设置颜色
				cols.unshift(c);//unshift是压入到数组的最前面（代表新的蛇头的列）
				rows.unshift(r);//unshift是压入到数组的最前面（代表新的蛇头的行）
				
				if(c==foodc&&r==foodr){
					alert("吃到了");
					createFood();
				}else{
					//删除蛇尾，并让蛇尾恢复灰色
					endc=cols.pop();//pop是删除并返回数组最末端的值
					endr=rows.pop();
					document.getElementById(endr+"-"+endc).style.backgroundColor="#ccc";
				}
				
			}
			window.onkeydown=function(e){
				switch(e.keyCode){
					case 37:dec="left";break;
					case 39:dec="right";break;
					case 38:dec="up";break;
					case 40:dec="down";break;
					default:break;
				}
			}
		</script>
	</body>
</html>
